import { ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormSelect, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import { Col, Row } from "antd";

const App:React.FC=()=>{
    interface DataType{
        sno?:number,code?:string,name?:string,type?:string,status?:string,sop?:string,default?:string,
     };

     const columns:ProColumns<DataType>[]=[
        {dataIndex:'sno',title:'操作顺序'},
        {dataIndex:'code',title:'编码'},{dataIndex:'name',title:'名称'},
        {dataIndex:'type',title:'类型'},{dataIndex:'sop',title:'SOP'},{dataIndex:'default',title:'默认执行人'},
        {dataIndex:'status',title:'状态'},
     ];

     const tdata:DataType[]=[
        {sno:1,code:'A001',name:'XX加工中心保养-A',type:'生产设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》',default:'一组'},
        {sno:2,code:'A002',name:'XX加工中心保养-B',type:'生产设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》',default:'一组'},
        {sno:3,code:'A003',name:'XX加工中心保养-C',type:'生产设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》',default:'一组'},
        {sno:4,code:'B001',name:'XX夹具校准-A',type:'工装夹具保养',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》',default:'张军'},
        {sno:5,code:'B002',name:'XX夹具校准-B',type:'工装夹具保养',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》',default:'张军'},
        {sno:6,code:'B003',name:'XX夹具校准-C',type:'工装夹具保养',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》',default:'张军'},
        {sno:7,code:'C001',name:'XX辊轴-A',type:'备品备件保养',status:'正常',sop:'《XX备品备件保养作业指导C05068》',default:'三组'},
        {sno:8,code:'C002',name:'XX辊轴-B',type:'备品备件保养',status:'正常',sop:'《XX备品备件保养作业指导C05068》',default:'三组'},
        {sno:9,code:'C003',name:'XX辊轴-C',type:'备品备件保养',status:'正常',sop:'《XX备品备件保养作业指导C05068》',default:'三组'},
     ];

     interface DataType2{
        sno?:number,code?:string,name?:string,type?:string,status?:string,sop?:string,
     };

     const columns2:ProColumns<DataType>[]=[
        {dataIndex:'sno',title:'操作顺序'},
        {dataIndex:'code',title:'编码'},{dataIndex:'name',title:'名称'},
        {dataIndex:'type',title:'类型'},{dataIndex:'sop',title:'SOP'},
        {dataIndex:'status',title:'状态'},
     ];

     const tdata2:DataType[]=[
        {sno:1,code:'A001',name:'XX加工中心保养-A',type:'设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》'},
        {sno:2,code:'A002',name:'XX加工中心保养-B',type:'设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》'},
        {sno:3,code:'A003',name:'XX加工中心保养-C',type:'设备保养',status:'正常',sop:'《XX加工中心保养作业指导A001》'},
        {sno:4,code:'B001',name:'XX夹具校准-A',type:'设备维修',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》'},
        {sno:5,code:'B002',name:'XX夹具校准-B',type:'设备维修',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》'},
        {sno:6,code:'B003',name:'XX夹具校准-C',type:'设备维修',status:'正常',sop:'《XX仪器仪表校准作业指导B02036》'},
        {sno:7,code:'C001',name:'XX维修辊轴-A',type:'备品备件',status:'正常',sop:'《XX备品备件保养作业指导C05068》'},
        {sno:8,code:'C002',name:'XX维修辊轴-B',type:'备品备件',status:'正常',sop:'《XX备品备件保养作业指导C05068》'},
        {sno:9,code:'C003',name:'XX维修辊轴-C',type:'备品备件',status:'正常',sop:'《XX备品备件保养作业指导C05068》'},
     ];

    return <>
         <ProCard title='保养计划' style={{height:700}}
         >
            <ProForm submitter={false} layout='horizontal' labelAlign="left" labelCol={{span:5,offset:0}}>
               <Row gutter={8}>
                  <Col span={6}>
                     <ProFormText name='f1' label='计划编号' width={200}/>
                     <ProFormText name='f2' label='计划名称' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormSelect name='f3' label='适用单位' width={200}/>
                     <ProFormText name='f4' label='保养范围' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormDatePicker name='f5' label='生效日期' width={200}/>
                     <ProFormDatePicker name='f6' label='截止日期' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormText name='f7' label='重复类型' width={200} initialValue={'每月'}/>
                     <ProFormText name='f8' label='重复间隔' width={200} initialValue={'1,10,20'}/>
                  </Col>
                </Row> 
            </ProForm>
             <ProTable<DataType>
                search={false}
                options={false}
                columns={columns}
                dataSource={tdata}

                />
         </ProCard>
    </>;
};

export default App;